<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<title><spring:message code="title"></spring:message></title>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link
	href="${webRoot}/static/global/plugins/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="${webRoot}/static/global/plugins/simple-line-icons/simple-line-icons.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="${webRoot}/static/global/plugins/bootstrap/css/bootstrap.min.css"
	rel="stylesheet" type="text/css" />
<link
	href="${webRoot}/static/global/plugins/uniform/css/uniform.default.css"
	rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<link href="${webRoot}/static/admin/pages/css/login.css"
	rel="stylesheet" type="text/css" />
<!-- BEGIN THEME STYLES -->
<link href="${webRoot}/static/global/css/components.css"
	id="style_components" rel="stylesheet" type="text/css" />
<link href="${webRoot}/static/global/css/plugins.css" rel="stylesheet"
	type="text/css" />
<link href="${webRoot}/static/admin/layout/css/layout.css"
	rel="stylesheet" type="text/css" />
<link href="${webRoot}/static/admin/layout/css/themes/darkblue.css"
	rel="stylesheet" type="text/css" id="style_color" />
<link href="${webRoot}/static/admin/layout/css/custom.css"
	rel="stylesheet" type="text/css" />
<style type="text/css">
html {
	height: 100%;
}

body {
	height: 100%;
	background-image: url(static/global/img/backlogin2.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}

.login-box {
	border-radius: 25px;
	width: 500px;
	height: 500px;
	background-color: white;
	text-align: center;
	margin: 0 auto;
	filter: alpha(Opacity = 80);
	-moz-opacity: 0.5;
	opacity: 0.5;
	margin-top: 10%;
	padding: 2% 5% 2% 5%;
}

.yhm-box {
	background: #0F0F0F;
	opacity: 0.5;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	padding: 8px;
	margin-top: 30px;
}

.yhm-input {
	background: #0F0F0F;
	opacity: 0.5;
	border: 0px;
	margin-left: 15px;
	border: 0px;
	width: 80%;
	height: 35px;
	padding: 0 0 0 10px;
	color: #ffffff;
}

.login-btn {
	background: black;
	opacity: 0.5;
	width: 150px;
	height: 50px;
	color: #ffffff;
	margin-top: 80px;
	font-size: 16px;
}
</style>
<!-- END THEME STYLES -->
</head>
<body>
	<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
	<div class="menu-toggler sidebar-toggler"></div>

	<!-- END LOGO -->
	<!-- BEGIN LOGIN -->
	<div class="content">
		<!-- BEGIN LOGIN FORM -->


		<div class="login-box">
			<form id="loginForm" action="${webRoot}/login/checkUser"
				method="post">
				<h1>用户登录</h1>
				<div class="yhm-box">
					<span class="glyphicon glyphicon-user"></span><input type="text"
						name="username" value="cong" class="yhm-input" placeholder="用户名" />
				</div>

				<div class="yhm-box">
					<span class="glyphicon glyphicon-lock"></span><input
						type="password" name="password" value="123456" class="yhm-input"
						placeholder="密码" />
				</div>

				<div style="float: left; margin-top: 20px;">
					<label> <input type="checkbox" checked><span>记住密码</span>
					</label>
				</div>

				<div style="float: right; margin-top: 20px;">
					<label> <input type="checkbox" checked><span>自动登录</span>
					</label>
				</div>

				<button class="login-btn" id="loginBtn">登录</button>

			</form>


		</div>
	</div>


	<script src="${webRoot}/static/global/plugins/jquery.min.js"
		type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery-migrate.min.js"
		type="text/javascript"></script>
	<script
		src="${webRoot}/static/global/plugins/bootstrap/js/bootstrap.min.js"
		type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery.blockui.min.js"
		type="text/javascript"></script>
	<script src="${webRoot}/static/global/plugins/jquery.cokie.min.js"
		type="text/javascript"></script>
	<script
		src="${webRoot}/static/global/plugins/uniform/jquery.uniform.min.js"
		type="text/javascript"></script>
	<!-- END CORE PLUGINS -->
	<!-- BEGIN PAGE LEVEL PLUGINS -->
	<script
		src="${webRoot}/static/global/plugins/jquery-validation/js/jquery.validate.min.js"
		type="text/javascript"></script>
	<script
		src="${webRoot}/static/global/plugins/jquery-validation/js/additional-methods.min.js"
		type="text/javascript"></script>
	<script
		src="${webRoot}/static/global/plugins/jquery-validation/js/localization/messages_zh.js"
		type="text/javascript"></script>
	<script src="${webRoot}/static/custom/validate-override.js"
		type="text/javascript"></script>
	<!-- END PAGE LEVEL PLUGINS -->
	<script type="text/javascript">
		// 项目访问根目录
		var webRoot = '${webRoot}';
	</script>
	<!-- BEGIN PAGE LEVEL SCRIPTS -->
	<script src="${webRoot}/static/global/scripts/metronic.js"
		type="text/javascript"></script>
	<script src="${webRoot}/static/admin/layout/scripts/layout.js"
		type="text/javascript"></script>
	<!-- END PAGE LEVEL SCRIPTS -->

	<script type="text/javascript">
		$(function() {
			Metronic.init(); // init metronic core components
			Layout.init(); // init current layout

			$('#loginForm').validate();

			$("#loginBtn")
					.click(
							function() {
								if ($('#loginForm').valid()) {
									$
											.ajax({
												type : 'post',
												url : $('#loginForm').attr(
														'action'),
												data : $('#loginForm')
														.serialize(),
												dataType : 'json',
												success : function(data) {
													if (data.result == 'login_success') {
														window.location.href = webRoot
																+ '/index';
													} else {
														alert('<spring:message code="login.msg.usernameOrPasswordError"></spring:message>');
														$('#loginForm')[0]
																.reset();
													}
												}
											});
								}
							});
		});
	</script>
</body>
</html>